<template>
    <div class="cl4">
        <div class="iHead">平安县城</div>
        <div class="main">
            <div id="cl4View" ref="cl4View"></div>
        </div>

    </div>
</template>

<script>
export default {
    props: ['infoData'],
    data() {
        return {
            cl4View: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.cl4View = this.$echarts.init(this.$refs.cl4View);
            this.chartInit();
        });
    },
    watch: {
        infoData: function (infoData) {
            this.chartInit();
        }
    },
    methods: {
        chartInit() {
            let xAxis = [], yAxis = [];
            this.infoData[3].map((i, o) => {
                xAxis.push(i[1])
                yAxis.push(i[2])
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                        formatter: function (value) {
                            // 使用正则表达式来判断是否需要换行
                            let ret = "";
                            let maxLength = 6; // 设置最大显示长度
                            let valLength = value.length; // 当前文本长度
                            let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
                            if (rowN > 1) {
                                for (let i = 0; i < rowN; i++) {
                                    let temp = ""; // 每次截取的字符串
                                    let start = i * maxLength; // 开始截取的位置
                                    let end = start + maxLength; // 结束截取的位置
                                    // 这里也可以用 slice 替代 substring
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; // 拼接生成最后的字符串
                                }
                                return ret;
                            } else {
                                return value;
                            }
                        }
                    },
                }
                ,
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        color: '#fff'
                    }
                }
                ,
                series: [
                    {
                        name:'完成度',
                        type: 'bar',
                        barWidth: '20',
                        itemStyle: {
                            barBorderRadius:10,
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#00EDEE' },
                                    { offset: 1, color: '#0065BD' }
                                ]
                            )
                        },
                        data: yAxis
                    }
                ]
            };

            this.cl4View.setOption(option)
        }
    }

}
</script>

<style lang="scss" scoped>
.cl4 {
    width: 900px;
    height: 300px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 900px;
        height: 300px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 800px;
        height: 260px;
        top: -40px;

        #cl4View {
            width: 800px;
            height: 260px;
        }
    }
}
</style>